@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --np-primary-card-background: #dbeafe; /* blue-100*/
        --np-primary-card-background-hover: #bfdbfe; /* blue-200*/
        --np-primary-card-border: #93c5fd; /* blue-300*/
        --np-primary-card-border-hover: #60a5fa; /* blue-400 */
        --np-primary-card-text: #1e3a8a; /* blue-900*/
        --np-primary-card-subtext: #1d4ed8; /* blue-700*/
        --np-primary-icon-background: #3b82f6; /* blue-500*/
        --np-primary-icon-shape: #dbeafe; /* blue-100*/

        --np-secondary-card-background: #ccfbf1; /* teal-100*/
        --np-secondary-card-background-hover: #99f6e4; /* teal-200*/
        --np-secondary-card-border: #5eead4; /* teal-300*/
        --np-secondary-card-border-hover: #2dd4bf; /* teal-400 */
        --np-secondary-card-text: #134e4a; /* teal-900*/
        --np-secondary-card-subtext: #0f766e; /* teal-700*/
        --np-secondary-icon-background: #14b8a6; /* teal-500*/
        --np-secondary-icon-shape: #ccfbf1; /* teal 100*/

        --background: 0 0% 100%; /* white */
        --background-onlook: 0 0% 90%; /* light gray */
        --background-brand: 171 100% 67%; /* lighter teal */
        --background-brand-secondary: 171 100% 77%; /* even lighter teal */
        --background-primary: 0 0% 100%; /* white */
        --background-secondary: 0 0% 95%; /* very light gray */
        --background-positive: 147 100% 44%; /* green */
        --background-tertiary: 0 0% 90%; /* light gray */
        --background-toolbar-base: 0 0% 100%; /* white */
        --background-hover: 0 0% 95%; /* very light gray */
        --background-active: 0 0% 90%; /* light gray */
        --background-disabled: 0 0% 95%; /* very light gray */

        --foreground: 0 0% 10%; /* black */
        --foreground-onlook: 0 0% 20%; /* dark gray */
        --foreground-brand: 344 100% 66%; /* red */
        --foreground-primary: 0 0% 10%; /* black */
        --foreground-secondary: 0 0% 20%; /* dark gray */
        --foreground-tertiary: 0 0% 33%; /* medium gray */
        --foreground-quadranary: 0 0% 47%; /* gray */
        --foreground-positive: 147 100% 18%; /* dark green */
        --foreground-hover: 0 0% 12%; /* very dark gray */
        --foreground-active: 0 0% 10%; /* black */
        --foreground-disabled: 0 0% 90%; /* light gray */

        --primary: 0 0% 10%; /* black */
        --primary-foreground: 0 0% 100%; /* white */

        --secondary: 0 0% 95%; /* very light gray */
        --secondary-foreground: 0 0% 10%; /* black */

        --destructive: 344 100% 66%; /* red */
        --destructive-foreground: 0 0% 100%; /* white */

        --card: 0 0% 100%; /* white */
        --card-foreground: 0 0% 10%; /* black */

        --popover: 0 0% 100%; /* white */
        --popover-foreground: 0 0% 10%; /* black */

        --icon: 0 0% 33%; /* medium gray */
        --icon-hover: 0 0% 10%; /* black */
        --icon-active: 0 0% 10%; /* black */
        --icon-disabled: 0 0% 20%; /* dark gray */

        --border: 0 0% 90%; /* light gray */
        --border-active: 0 0% 67%; /* medium gray */
        --border-hover: 0 0% 57%; /* gray */

        --muted: 0 0% 95%; /* very light gray */
        --muted-foreground: 0 0% 20%; /* dark gray */

        --accent: 0 0% 95%; /* very light gray */
        --accent-foreground: 0 0% 10%; /* black */

        --input: 0 0% 95%; /* very light gray */
        --ring: 0 0% 90%; /* light gray */

        --radius: 0.5rem; /* shadcn */
    }

    .dark {
        --np-primary-card-background: #172554; /* blue-950 */
        --np-primary-card-background-hover: #1e3a8a; /* blue-900*/
        --np-primary-card-border: #1e40af; /* blue-800*/
        --np-primary-card-border-hover: #2563eb; /* blue-600; */
        --np-primary-card-text: #dbeafe; /* blue-100*/
        --np-primary-card-subtext: #93c5fd; /* blue-300*/
        --np-primary-icon-background: #3b82f6; /* blue-500*/
        --np-primary-icon-shape: #dbeafe; /* blue 100*/

        --np-secondary-card-background: #042f2e; /* teal-950 */
        --np-secondary-card-background-hover: #155e75; /* teal-800*/
        --np-secondary-card-border: #155e75; /* teal-800*/
        --np-secondary-card-border-hover: #0891b2; /* teal-600; */
        --np-secondary-card-text: #ccfbf1; /* teal-100*/
        --np-secondary-card-subtext: #5eead4; /* teal-300*/
        --np-secondary-icon-background: #14b8a6; /* teal-500*/
        --np-secondary-icon-shape: #ccfbf1; /* teal 100*/

        --background: 20 14.3% 4.1%; /* shadcn */
        --background-onlook: 0 0% 10%; /* gray[900] */
        --background-brand: 171 100% 17%; /* teal[700] */
        --background-brand-secondary: 171 100% 27%; /* teal[500] */
        --background-primary: 0 0% 10%; /* gray[900] */
        --background-secondary: 0 0% 12%; /* gray[800] */
        --background-positive: 0 0% 12%; /* green[800] */
        --background-tertiary: 0 0% 20%; /* gray[700] */
        --background-toolbar-base: 0 0% 0% 0.85; /* black[85] */
        --background-hover: 0 0% 12%; /* gray[800] */
        --background-active: 0 0% 20%; /* gray[700] */
        --background-disabled: 0 0% 10%; /* gray[900] */

        --foreground: 60 9.1% 97.8%; /* shadcn */
        --foreground-onlook: 0 0% 67%; /* gray[200] */
        --foreground-brand: 344 100% 66%; /* red[DEFAULT] */
        --foreground-primary: 0 0% 100%; /* gray[50] */
        --foreground-secondary: 0 0% 67%; /* gray[200] */
        --foreground-tertiary: 0 0% 57%; /* gray[300] */
        --foreground-quadranary: 0 0% 38%; /* gray[500] */
        --foreground-positive: 147 100% 44%; /* green[200] */
        --foreground-hover: 0 0% 78%; /* gray[100] */
        --foreground-active: 0 0% 100%; /* gray[50] */
        --foreground-disabled: 0 0% 10%; /* gray[900] */

        --primary: 60 9.1% 97.8%; /* shadcn */
        --primary-foreground: 24 9.8% 10%; /* shadcn */

        --secondary: 12 6.5% 15.1%; /* shadcn */
        --secondary-foreground: 60 9.1% 97.8%; /* shadcn */

        --destructive: 345.35 100% 16.86%; /* red[900] */
        --destructive-foreground: 344.21 100% 96.27%; /* red[100] */

        --card: 20 14.3% 4.1%; /* shadcn */
        --card-foreground: 60 9.1% 97.8%; /* shadcn */

        --popover: 20 14.3% 4.1%; /* shadcn */
        --popover-foreground: 60 9.1% 97.8%; /* shadcn */

        --icon: 0 0% 57%; /* gray[300] */
        --icon-hover: 0 0% 100%; /* gray[50] */
        --icon-active: 0 0% 100%; /* gray[50] */
        --icon-disabled: 0 0% 67%; /* gray[200] */

        --border: 0 0% 12%; /* gray[800] */
        --border-active: 0 0% 47%; /* gray[400] */
        --border-hover: 0 0% 38%; /* gray[500] */

        --muted: 12 6.5% 15.1%; /* shadcn */
        --muted-foreground: 24 5.4% 63.9%; /* shadcn */

        --accent: 12 6.5% 15.1%; /* shadcn */
        --accent-foreground: 60 9.1% 97.8%; /* shadcn */

        --input: 12 6.5% 15.1%; /* shadcn */
        --ring: 24 5.7% 82.9%; /* shadcn */
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
    ::-webkit-scrollbar {
        @apply hidden;
    }
}
